<template>
  <div class="g-page-container">
    <PageHeader title="失销分析" />
    <div class="g-content-container spin-position">
      <LostSearchForm ref="search-form" @search="loadTableList" />
      <div class="list-container">
        <p-tabs
          :animated="false"
          class="tabs-container"
          default-active-key="1"
          @change="tabsChange"
        >
          <p-tab-pane key="1" tab="失销原因">
            <LostReasonPie
              v-if="keyTabs === '1'"
              :echart-data="echartReasonData"
            />
          </p-tab-pane>
          <p-tab-pane key="2" tab="失销阶段">
            <LostStagePie
              v-if="keyTabs === '2'"
              :echart-data="echartStageData"
              :form-params="getParams"
              :include-leads="includeLeads"
              @changeCludeLead="changeCludeLead"
            />
          </p-tab-pane>
        </p-tabs>
      </div>
      <Spin :spinning="loading" top="17%" />
    </div>
  </div>
</template>

<script>
import LostSearchForm from '@/components/search/lostSearchForm.vue';
import LostReasonPie from './components/lostReasonPie.vue';
import LostStagePie from './components/lostStagePie.vue';

import {
  postLoseReasonReport,
  postLoseStageReport,
} from '@/api/analysisEcharts.js';
import monent from 'moment';

export default {
  components: {
    LostSearchForm,
    LostReasonPie,
    LostStagePie,
  },
  data() {
    return {
      asc: true,
      loading: false,
      echartReasonData: [],
      echartStageData: [],
      keyTabs: '1',
      includeLeads: true,
    };
  },
  computed: {
    getParams() {
      return this.getSearchForm();
    },
  },
  watch: {
    includeLeads: {
      handler() {
        this.loadTableList();
      },
    },
  },
  created() {
    this.getEchartDataList();
  },
  methods: {
    async tabsChange(key) {
      const data = this.getSearchForm();
      this.keyTabs = key;
      key === '1' ? this.reasonList(data) : this.stageList(data);
    },
    changeCludeLead(val) {
      this.includeLeads = val;
    },
    async getEchartDataList() {
      const params = {
        startCreateTime: `${monent(new Date())
          .subtract(6, 'months')
          .format('YYYY-MM-DD')} 00:00:00`,
        endCreateTime: `${monent(new Date()).format('YYYY-MM-DD')} 23:59:59`,
      };
      this.loading = true;

      try {
        const result = await postLoseReasonReport(params);
        this.echartReasonData = result?.data?.data;
        this.loading = false;
      } catch (err) {
        console.log(err);
        this.loading = false;
      }
    },
    getSearchForm() {
      const form = this.$refs['search-form']?.getSearchParams || {};
      let { startCreateTime, endCreateTime } = form;
      form.startCreateTime = startCreateTime
        ? `${monent(startCreateTime).format('YYYY-MM-DD')} 00:00:00`
        : '';
      form.endCreateTime = endCreateTime
        ? `${monent(endCreateTime).format('YYYY-MM-DD')} 23:59:59`
        : '';
      return { ...form };
    },
    // 原因
    async reasonList(data) {
      this.loading = true;
      const result = await postLoseReasonReport(data).finally(
        () => (this.loading = false)
      );
      this.echartReasonData = result?.data?.data;
    },
    // 阶段
    async stageList(data) {
      let params = {
        ...data,
        includeLeads: this.includeLeads,
      };
      this.loading = true;
      const result = await postLoseStageReport(params).finally(
        () => (this.loading = false)
      );
      this.echartStageData = result?.data?.data;
    },
    loadTableList() {
      let formData = this.getSearchForm();
      // 校验时间是否只输入一个
      if (!formData.startCreateTime && formData.endCreateTime) {
        this.$message.error('请选择开始时间');
        return;
      }
      if (formData.startCreateTime && !formData.endCreateTime) {
        this.$message.error('请选择结束时间');
        return;
      }
      if (!formData.startCreateTime && !formData.endCreateTime) {
        this.$message.error('请选择开始时间和结束时间');
        return;
      }

      this.keyTabs === '1'
        ? this.reasonList(formData)
        : this.stageList(formData);
    },
  },
};
</script>

<style lang="less" scoped>
.spin-position {
  position: relative;
}
.table-container {
  padding: 15px 20px;
  // height: calc(100vh - 60px);
  box-sizing: border-box;
}
.list-container {
  // height: calc(100% - 110px);
  overflow: auto;
  position: relative;
  box-sizing: border-box;
  /deep/.poros-tabs-nav .poros-tabs-tab {
    margin: 0;
    padding: 12px 32px 12px 0;
  }
  /deep/ .poros-tabs-nav .poros-tabs-tab-active {
    color: #1740dc;
  }
  /deep/.poros-tabs-ink-bar {
    width: 48px !important;
  }
}
</style>
